<template>
	<div id="userManage">
		<div class="breadcrumb">
			<img src="../../../../static/img/venueManage_1.png" class="head_img">
			<span class="title">用户管理</span>
		</div>
		<div class="search">
			<el-select v-model="preidentity" @change="getUserList">
				<el-option v-for='item in identities' :label='item.identityName' :key="item.identityName" :value='item.identityId'></el-option>
			</el-select>
		</div>
		<div class="list">
			<div class="list_head">
				<el-input class="inp" placeholder="请输入学号,教职工号或手机号" icon="search" v-model="input2" @keyup.enter.native="getUserList" :on-icon-click="getUserList"></el-input>
			</div>
			<el-table :data="list">
				<el-table-column prop="phone" label="手机号">
				</el-table-column>
				<el-table-column prop="userName" label="姓名">
				</el-table-column>
				<el-table-column prop="gender" label="性别">
				</el-table-column>
				<el-table-column prop="identity" label="身份">
				</el-table-column>
				<el-table-column prop="campusId" label="学号/教职工号">
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination v-show="this.totalCount > 0" layout="prev, pager, next, jumper" :page-size="10" :current-page="currentPage"
				 :total="totalCount" @current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			return {
				list: [],
				input2: "",
				totalCount: 0,
				currentPage: 1,
				preidentity: "-1",
				identities: [{ identityName: "所有身份", identityId: "-1" }]
			};
		},
		mounted() {
			this.getIdentityList();
			this.getUserList();
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			//身份列表
			getIdentityList() {
				let url = this.$util.domain + "/erp/api/v20/tools/campusidentity";
				this.identities = [{ identityName: "所有身份", identityId: "-1" }];

				this.$http({
					url,
					method: "GET"
				}).then(response => {
					if (response.data.error == 10000) {
						let identityList = response.data.data;
						if (identityList && identityList.length > 0) {
							this.identity = identityList[0].identityId;
							for (let i = 0; i < identityList.length; i++) {
								let $identityId = identityList[i].identityId,
									$identityName = identityList[i].identityName;
								this.identities.push({
									identityId: $identityId,
									identityName: $identityName
								});
							}
						}
					}
				});
			},
			//场馆用户列表
			getUserList() {
				let url = this.$util.domain + "/erp/api/v20/user/venueuser";
				this.list = [];

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						venueId: 0,
						pageSize: 10,
						keyWords: this.input2,
						pageNum: this.currentPage,
						identityId: this.preidentity
					})
				}).then(response => {
					if (response.data.error == 10000) {
						let userList = response.data.data.data;
						this.totalCount = response.data.data.total;
						if (userList && userList.length > 0) {
							for (let i = 0; i < userList.length; i++) {
								let $index = i + 1,
									$userName = userList[i].name,
									$gender = userList[i].gender,
									$identity = userList[i].identity,
									$phone = userList[i].phone,
									$campusId = userList[i].stuNo;
								if ($gender == 1) {
									$gender = "男";
								} else {
									$gender = "女";
								}

								this.list.push({
									index: $index,
									phone: $phone,
									gender: $gender,
									identity: $identity,
									campusId: $campusId,
									userName: $userName
								});
							}
						}
					}
				});
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getUserList();
			}
		}
	};
</script>

<style scoped>
	#userManage {
		padding-top: 60px;
		height: calc(100% - 100px);
	}

	#userManage .sel_btn {
		position: absolute;
		right: 55px;
		margin-top: 12px;
	}

	#userManage .search {
		margin: 20px 30px;
		background: #ffffff;
		border-radius: 2px;
		height: 60px;
		line-height: 60px;
		padding: 0 25px;
	}

	#userManage .inp {
		width: 300px;
		display: inline-block;
	}
</style>